import * as THREE from 'three';//导入threejs
import { GLTFLoader } from 'three/examples/jsm/Addons.js';//导入GLTFLoader导入glb文件
import { RGBELoader } from 'three/examples/jsm/Addons.js';//导入RGBELoader导入渲染
import { OrbitControls } from 'three/examples/jsm/Addons.js';//导入OrbitControls常用鼠标摄像机控制
// import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
let ground: any ;//创建一个地面groundb变量，设置ground的类型为any，避免类型报错
let BBox1: any ;//创建一个Box1变量，设置Box1的类型为any，避免类型报错
const renderer = new THREE.WebGLRenderer();//创建渲染器
renderer.setSize(window.innerWidth, window.innerHeight);//设置渲染器尺寸
renderer.setPixelRatio(window.devicePixelRatio);//设置像素比,针对高分辨率平台支持更高的渲染效果，代价是性能降低
renderer.setAnimationLoop(animationLoop);//设置动画循环,渲染器方法更新画面
document.body.appendChild(renderer.domElement);//将渲染器添加到dom中
const scene = new THREE.Scene();//创建场景
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);//创建透视相机
camera.position.set(0, 0, 30);//设置相机位置

//1.创建WebgGLcubeRenderTarget.
const cubeRenderTarget = new THREE.WebGLCubeRenderTarget(4096);//渲染需要6个摄像机所以不要设置太大的分辨率会非常卡
//2.将第一步创建的WebgGlcubeRenderTarget对象作为参数传递给CubeCamera.
const cubeCamera = new THREE.CubeCamera(0.1,1000,cubeRenderTarget);
//3.在帧循环中调用第二部创建的CubeCamera对象的update方法，每帧更新渲染结果。
//4.将WebGLCubeRenderTarget对象的texture赋值给环境材质的环境贴图通道：envMap
const controls = new OrbitControls(camera, renderer.domElement);//创建OrbitControls
controls.enableDamping = true; // 启用阻尼效果
controls.dampingFactor = 0.05; // 设置阻尼因子
const gltfLoder = new GLTFLoader();//创建GLTFLoader 
gltfLoder.load('杀菌锅.glb',(gltf)=>{
    scene.add(gltf.scene);//将场景添加到场景中
    gltf.scene.traverse((child: any) => {   //遍历场景中的所有物体
        if (child.type === 'Mesh'){
             child.material.envMap = cubeRenderTarget.texture;//设置环境贴图
            
        }

        if (child.name === 'Box1'){
            //child.visible = false;//隐藏box物体
            child.visible = true;//显示box2物体
            //ground = child;//设置ground赋值给地面
            BBox1 = child;//设置Box1赋值给Box1
       }
        if (child.name === 'Box2'){
            child.visible = true;//显示box2物体
            child.position.set(0, 0.1, -0.5);//设置box2物体位置
            
        }
        if (child.name === '地面'){
            child.visible = true;
            child.material.side  = THREE.DoubleSide;//设置网格模型正反面渲染 
            ground = child;//设置ground赋值给地面
            
        }
        // if (child instanceof THREE.Mesh) {  //判断是否为网格模型
        //     child.material.side  = THREE.DoubleSide;//设置网格模型双面渲染 
        //     // if(child.name === '1'){
        //     //     child.material.side  = THREE.DoubleSide;//设置网格模型双面渲染
        //     //     child.material.needsUpdate = true;///设置材质更新
        //     // }
        //     // if(child.name === '2'){
        //     //     child.material.side  = THREE.FrontSide;//设置网格模型单面渲染
        //     //     child.material.needsUpdate = true;///设置材质更新
        //     // }
        // } 
        });
});
const rgbeLoader = new RGBELoader();//创建RGBELoader
rgbeLoader.load('SKY_2_512.hdr',(skyTexture)=>{
    scene.background = skyTexture;//设置场景背景
    scene.environment = skyTexture;//设置场景环境
    skyTexture.mapping = THREE.EquirectangularReflectionMapping;//                                                                                                                                                                                                                      
}); 






function animationLoop(){
    controls.update();//更新控制器
    //if (ground !== undefined){}//判断ground是否为空，不为空则执行下面的代码

    if (ground){
        ground.visible = false;//隐藏地面
        BBox1.visible = false;//隐藏Box1物体
        cubeCamera.position.copy(camera.position);//将相机位置赋值给CubeCamera
        cubeCamera.position.y = -cubeCamera.position.y;//设置相机位置y轴轴取反
        cubeCamera.update(renderer,scene);//更新渲染结果
        ground.visible = true;//显示地面
        BBox1.visible = true;//显示Box1物体
    }
 
    renderer.render(scene, camera);//渲染场景渲染需要再更新之后，负责会画面抖动
   }
   //修改测试

// // 渲染循环
// let angle = 0; //用于圆周运动计算的角度值
// const R = 10; //相机圆周运动的半径
// function render() {
//     angle -= 0.01;//角度值每次加0.01
//     // 相机y坐标不变，在XOZ平面上做圆周运动
//     camera.position.x = R * Math.cos(angle);//设置相机x坐标
//     camera.position.z = R * Math.sin(angle);//设置相机z坐标
//     renderer.render(scene, camera);//渲染场景
//     requestAnimationFrame(render);//循环渲染
// }
// render();